<template>
  <div class="page-container">
    <div class="flex justify-between items-center">
      <div>
        <h1 class="page-title">统计报表</h1>
        <div class="breadcrumb-container">
          <ul>
            <li><a @click="router.push('/')">首页</a></li>
            <li>统计报表</li>
          </ul>
        </div>
      </div>
      <div class="btn-group">
        <button class="btn btn-outline">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
          </svg>
          导出报表
        </button>
        <button class="btn btn-outline">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clip-rule="evenodd" />
          </svg>
          刷新数据
        </button>
      </div>
    </div>

    <!-- 数据概览 -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
      <div class="stats shadow">
        <div class="stat">
          <div class="stat-title">总魂魄数量</div>
          <div class="stat-value">12,361</div>
          <div class="stat-desc">较上月 ↗︎ 1,234 (11%)</div>
        </div>
      </div>

      <div class="stats shadow">
        <div class="stat">
          <div class="stat-title">平均功德值</div>
          <div class="stat-value text-primary">67.8</div>
          <div class="stat-desc">较上月 ↗︎ 3.2 (5%)</div>
        </div>
      </div>

      <div class="stats shadow">
        <div class="stat">
          <div class="stat-title">平均罪孽值</div>
          <div class="stat-value text-secondary">45.2</div>
          <div class="stat-desc">较上月 ↘︎ 2.1 (4%)</div>
        </div>
      </div>

      <div class="stats shadow">
        <div class="stat">
          <div class="stat-title">平均轮回次数</div>
          <div class="stat-value text-accent">3.6</div>
          <div class="stat-desc">较上月 ↗︎ 0.2 (6%)</div>
        </div>
      </div>
    </div>

    <div class="card-container">
      <!-- 功德罪孽分布 -->
      <div class="card-content lg:col-span-2">
        <div class="card-body-custom">
          <h2 class="section-title">功德罪孽分布</h2>
          <div class="h-80 bg-base-200 rounded-lg"></div>
        </div>
      </div>

      <!-- 轮回类型占比 -->
      <div class="card-content">
        <div class="card-body-custom">
          <h2 class="section-title">轮回类型占比</h2>
          <div class="h-80 bg-base-200 rounded-lg"></div>
        </div>
      </div>

      <!-- 地狱层数分布 -->
      <div class="card-content lg:col-span-2">
        <div class="card-body-custom">
          <h2 class="section-title">地狱层数分布</h2>
          <div class="h-80 bg-base-200 rounded-lg"></div>
        </div>
      </div>

      <!-- 月度趋势 -->
      <div class="card-content">
        <div class="card-body-custom">
          <h2 class="section-title">月度趋势</h2>
          <div class="h-80 bg-base-200 rounded-lg"></div>
        </div>
      </div>
    </div>

    <!-- 排行榜 -->
    <div class="card-content">
      <div class="card-body-custom">
        <h2 class="section-title">排行榜</h2>
        <div class="tabs">
          <a class="tab tab-bordered" :class="{ 'tab-active': activeTab === 'merit' }" @click="activeTab = 'merit'">功德榜</a>
          <a class="tab tab-bordered" :class="{ 'tab-active': activeTab === 'sin' }" @click="activeTab = 'sin'">罪孽榜</a>
          <a class="tab tab-bordered" :class="{ 'tab-active': activeTab === 'reincarnation' }" @click="activeTab = 'reincarnation'">轮回榜</a>
        </div>
        <div class="table-container">
          <table class="table table-zebra">
            <thead>
              <tr>
                <th class="w-16">排名</th>
                <th>魂魄姓名</th>
                <th>{{ getRankTitle }}</th>
                <th>状态</th>
                <th>趋势</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in rankingList" :key="item.id">
                <td>
                  <div class="badge" :class="getRankBadgeClass(index + 1)">
                    {{ index + 1 }}
                  </div>
                </td>
                <td>{{ item.name }}</td>
                <td>{{ item.value }}</td>
                <td>
                  <div class="badge" :class="getStatusBadgeClass(item.status)">
                    {{ getStatusLabel(item.status) }}
                  </div>
                </td>
                <td>
                  <div class="flex items-center gap-2">
                    <span :class="getTrendClass(item.trend)">{{ item.trend > 0 ? '↗' : '↘' }}</span>
                    {{ Math.abs(item.trend) }}%
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const activeTab = ref('merit')

// 排行榜数据
const rankingList = ref([
  { id: 1, name: '张三', value: 98, status: 'processing', trend: 5 },
  { id: 2, name: '李四', value: 95, status: 'completed', trend: -2 },
  { id: 3, name: '王五', value: 92, status: 'pending', trend: 3 },
  { id: 4, name: '赵六', value: 88, status: 'processing', trend: -1 },
  { id: 5, name: '钱七', value: 85, status: 'completed', trend: 4 },
])

const getRankTitle = computed(() => {
  switch (activeTab.value) {
    case 'merit':
      return '功德值'
    case 'sin':
      return '罪孽值'
    case 'reincarnation':
      return '轮回次数'
    default:
      return ''
  }
})

const getRankBadgeClass = (rank: number) => {
  switch (rank) {
    case 1:
      return 'badge-primary'
    case 2:
      return 'badge-secondary'
    case 3:
      return 'badge-accent'
    default:
      return 'badge-ghost'
  }
}

const getStatusBadgeClass = (status: string) => {
  switch (status) {
    case 'pending':
      return 'badge-warning'
    case 'processing':
      return 'badge-info'
    case 'completed':
      return 'badge-success'
    default:
      return ''
  }
}

const getStatusLabel = (status: string) => {
  switch (status) {
    case 'pending':
      return '待处理'
    case 'processing':
      return '进行中'
    case 'completed':
      return '已完成'
    default:
      return status
  }
}

const getTrendClass = (trend: number) => {
  return trend > 0 ? 'text-success' : 'text-error'
}
</script>

<style scoped>
.chart-placeholder {
  @apply bg-base-200 rounded-lg;
  height: 300px;
}
</style>
